<template>
  <div class="page">
    <!-- <div class="box1">
      <h3>企业数字化和大数据服务解决方案</h3>
      <p class="message">
        围绕企业智能相关的数字化系统和经营大数据，为企业提供数字化流程落地实施、大数据经营整体方案和企业社会化数据源集成，以及企业与银行的金融对接系统设计。
      </p>
      <el-carousel :interval="5000" arrow="always" indicator-position="none" height="500px">
        <el-carousel-item>
          <img src="../assets/image/qyszh1.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/image/qyszh2.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/image/qyszh3.jpg" alt="">
        </el-carousel-item>
        <el-carousel-item>
          <img src="../assets/image/qyszh4.jpg" alt="">
        </el-carousel-item>
      </el-carousel>
    </div> -->
    <!-- <div style="padding: 40px 10%;">
      <h3>地方政府大数据解决方案</h3>
      <p class="message">
        以整体方案提升政府的内部大数据管理效率，提供情报和金融价值管理方案。
      </p>
      <div class="case">
        <div
          v-for="(item, index) in data"
          :key="index"
          @mouseenter="hover1(index)"
          :class="hoverIndex1 == index ? 'active' : ''"
        >
          <div class="line" v-show="hoverIndex1 == index"></div>
          <div class="content">
            <h3 class="title">{{ item.id }}</h3>
            <p class="title">{{ item.title }}</p>
            <p>{{ item.description }}</p>
            <ul v-for="(data, i) in item.list" :key="i" class="list">
              <li
                :style="{ color: data.status == 1 && hoverIndex1 == index ? '#3C9BC7FF' : '',}"
              >
                {{ data.message }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div> -->
    <div style="padding: 20px 10%;">
      <h3>业务范围</h3>
      <p class="message">
        为客户企业提供自动化、数字化、智能化、零碳化的整体解决方案
      </p>
      <div class="safe">
        <div
          v-for="(item, i) in data1"
          :key="i"
          class="safe-item"
          @mouseenter="hover2(i)"
          :class="hoverIndex2 == i ? 'active' : ''"
        >
          <img :src="item.icon" alt="" />
          <div>
            <p class="title">{{ item.title }}</p>
            <!-- <p class="desc">{{ item.description }}</p> -->
            <ul>
              <li v-for="(data, j) in item.list" :key="j" style="line-height:30px">
                {{ data }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div style="padding:20px 10%;">
        <h3 style="color:#3655A5;margin-bottom:50px;text-align: left;">合作伙伴 <span class="li-en">Our Partner</span></h3>
        <div class="logo">
          <img src="../assets/logoNew/dongruan.png" alt="">
          <img src="../assets/logoNew/gelansushike.png" alt="">
          <img src="../assets/logoNew/hongguan.png" alt="">
          <img src="../assets/logoNew/huaweiyun.png" alt="">
          <img src="../assets/logoNew/leinao.png" alt="">
          <img src="../assets/logoNew/linghui.png" alt="">
          <img src="../assets/logoNew/nanfangdianwang.png" alt="">
          <img src="../assets/logoNew/shangqi.png" alt="">
          <img src="../assets/logoNew/shengongbeng.png" alt="">
          <img src="../assets/logoNew/shenhang.png" alt="">
          <img src="../assets/logoNew/sony.png" alt="">
          <img src="../assets/logoNew/tebian.jpg" alt="">
          <img src="../assets/logoNew/tecno.png" alt="">
          <img src="../assets/logoNew/tengjing.png" alt="">
          <img src="../assets/logoNew/ximenzi.png" alt="">
          <img src="../assets/logoNew/xinsong.png" alt="">
          <img src="../assets/logoNew/yidong.jpg" alt="">
          <img src="../assets/logoNew/youwei.png" alt="">
          <img src="../assets/logoNew/youxun.png" alt="">
          <img src="../assets/logoNew/zhihuishu.png" alt="">
          <img src="../assets/logoNew/zhongmei.png" alt="">
          <img src="../assets/logoNew/lianxin.png" alt="">
        </div>
      </div>
  </div>
</template>

<script>
import pic1 from "../assets/image/message.png";
import pic2 from "../assets/image/design.png";
import pic3 from "../assets/image/network.png";
import pic4 from "../assets/image/number.png";
export default {
  data() {
    return {
      // data: [
      //   {
      //     id: "01",
      //     title: "地方政府产业金融大数据解决方案",
      //     description:
      //       "大数据应用下，地方政府可以根据产业大数据的应用能力开发金融辅助方案，直接打通制造与供应的能力，实现去中介化，降低成本，提高效率，实现产业升级。",
      //     list: [
      //       { status: 1, message: "地方政府特产交易平台方案" },
      //       { status: 1, message: "银团地方政府资产对冲产品方案" },
      //       { status: 1, message: "大数据资产化包引擎定制化方案" },
      //       { status: 1, message: "地方政府资金流管理平台" },
      //     ],
      //   },
      //   {
      //     id: "02",
      //     title: "政府和工业园区的大数据营销解决方案",
      //     description:
      //       "为企业和政府工业园区打造可以租赁使用的营销与市场大数据云平台方案。为工业园区实现商业模式的升级换代提供大数据运营基础。",
      //     list: [
      //       { status: 0, message: "大数据云档案系统" },
      //       { status: 1, message: "数字产业园解决方案" },
      //       { status: 0, message: "零工平台和地区人力资源管控方案" },
      //       { status: 0, message: "地区品牌营销系统" },
      //     ],
      //   },
      //   {
      //     id: "03",
      //     title: "地方行政内控大数据解决方案",
      //     description:
      //       "提供解决方案协助政府在其数据中挖掘出有价值的信息，在恰当时间将有针对性的信息提供给相应的管理角色。",
      //     list: [
      //       { status: 1, message: "地方产业资源管控系统" },
      //       { status: 1, message: "行政管理规则引擎" },
      //       { status: 1, message: "行政内部大数据管理系统" },
      //       { status: 1, message: "经济社会关键大数据实时监控平台" },
      //     ],
      //   },
      // ],
      hoverIndex1: -1,
      data1: [
        {
          icon: pic1,
          title: "规划咨询业务",
          list: [
            "企业数字化转型的规划设计",
            "智能工厂、智慧矿山、智慧楼宇与园区顶层规划设计咨询",
            "物流与供应链金融管控咨询与规划",
            "精益生产、营销与管理的规划咨询",
          ],
        },
        {
          icon: pic2,
          title: "自动化业务",
          list: [
            "流程自动化装备设计生产安装业务  （涵盖装备制造，医药化工，石化炼化，耐火材料，仪器仪表装备生产线设计，组装和集成实施）",
          ],
        },
        {
          icon: pic3,
          title: "数字化业务",
          list: [
            "数据采集、数据管理、信息系统集成、协同制造、BI可视化展示包括生产指挥中心",
            "基于数字工业操作系统的制造执行系统（MES）、制造运行管理平台（MOM）、产业供应链产销平台（含EDI接入），设施预测性维护（PHM）和资产管理系统（AMS）等工业应用",
            "工业互联网底层数据湖+人工智能体系",
            "提供社会基础设施、企业设备云运维及大数据平台",
          ],
        },
        {
          icon: pic4,
          title: "工业互联网业务",
          list: [
            "工业互联网云MES平台",
            "工业互联网基础安全及区块链安全",
            "大数据分析与工业智能分析",
            "网络舆情和网络行为实时大数据系统",
          ],
        },
      ],
      hoverIndex2: -1,
      enterpriseData: [
        {
          title: "地方政府产业金融大数据解决方案",
          description:
            "大数据应用下，地方政府可以根据产业大数据的应用能力开发金融辅助方案，直接打通制造与供应的能力，实现去中介化，降低成本，提高效率，实现产业升级。",
          list: [
            { status: 1, message: "地方政府特产交易平台方案" },
            { status: 1, message: "银团地方政府资产对冲产品方案" },
            { status: 1, message: "大数据资产化包引擎定制化方案" },
            { status: 1, message: "地方政府资金流管理平台" },
          ],
        },
      ],
    };
  },
  methods: {
    hover1(index) {
      this.hoverIndex1 = index;
    },
    hover2(index) {
      this.hoverIndex2 = index;
    },
    godetails(key){
      this.$router.push('/product_details?key='+key)
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page {
  color: #04113bff;
  text-align: center;
  background-color: rgb(243, 245, 250);
  width: 100%;
  background-image: url("../assets/image/bg3.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  font-weight: 400;
}
h3 {
  font-weight: bold;
  font-size: 32px;
  margin: 50px 0;
}
p {
  line-height: 30px;
}
.message {
  width: 70%;
  margin: 0 auto;
  margin-bottom: 60px;
}
.box1 {
  margin: 0 auto;
}
.box1 img{
  height: 460px;
  width: auto;
}

.case {
  margin: 20px 0;
  display: flex;
  justify-content: space-around;
  text-align: left;
  color: #999fb3ff;
}
.case > div {
  width: 30%;
}
.title {
  color: #3655a5ff;
  font-weight: bold;
}
.content {
  padding: 20px 5%;
}
.active {
  background-color: #fff;
  box-shadow: 0px 20px 40px  rgba(54, 85, 165, 0.3);
  background: #fff;
  border-radius: 8px;
  transition: all .5s;
}
.active .title {
  color: #3c9bc7ff;
}
.active .list {
  color: #04113bff;
}
ul {
  padding-inline-start: 18px;
}
.line {
  background-color: #3c9bc7ff;
  height: 8px;
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.safe {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: left;
  margin-bottom: 100px;
}
.safe-item {
  width: 45%;
  display: flex;
  padding: 30px 5%;
}
.safe img {
  width: 60px;
  height: 60px;
  margin-right: 32px;
}
p {
  margin-top: 0;
}
.safe .title {
  color: #3655a5ff;
  font-weight: bold;
}
.safe .desc {
  color: #999fb3ff;
}
.el-carousel__container .is-active img{
  box-shadow: 0px 6px 10px #dbdfeb !important;
}
.li-en {
  color: #999fb3;
  font-family: bb2331;
  font-size: 16px;
  font-weight: 400;
}
.logo {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  align-items: center;
}
.logo img {
  height: 70px;
  width: 160px;
  margin: 0 20px 40px 0;
  /* cursor: pointer; */
}
</style>
